<template>
<div class="farter">
  <ul id="home-nav">
    <li><router-link to="/">推荐音乐</router-link></li>
    <li><router-link to="/hot">热歌榜</router-link></li>
    <li><router-link to="/search">搜索</router-link></li>
  </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.farter{
  width: 100vw;
  height: 41px;
#home-nav {
  border-bottom: 1px solid #eeeeee;
  width: 100vw;
  height: 41px;
  display: flex;
  justify-content:space-around;
  background: #eeeeee;
  z-index: #fcfcfa;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  li {
    text-align: center;
    a {
      //   background: lightblue;
      text-decoration: none;
      color: black;
      line-height: 40px;
      display: inline-block;
      padding: 0 10px;

      &.router-link-exact-active {
        color: #dd001b;
        border-bottom: 2px solid #dd001b;
      }
    }
  }
}
}
</style>